<template>
  <view class="progress-bar-container">
    <view class="progress-bar" :style="{ width: progress + '%' }" />
  </view>
</template>
 
<script>
export default {
  name: 'ProgressBar',
  props: {
    progress: {
      type: Number,
      required: true
    }
  }
}
</script>
 
<style scoped>
.progress-bar-container {
  width: 100rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #137CA7;
}
 
.progress-bar {
  height: 10rpx;
  background-color: #1EC7FD;
  transition: width 0.5s ease-in-out;
  border-radius: 8rpx;
  text-align: center;
  line-height: 10rpx;
}
</style>